/*
 * @Description: 
 * @Author: liyuhao
 * @Date: 2021-08-16 13:34:36
 * @LastEditors: liyuhao
 * @LastEditTime: 2021-09-06 11:17:02
 */
import React from 'react'
import UploadFile from '@/components/UploadFile'
import {Col, Form, FormInstance, FormItemProps, Row} from 'antd'
import {upload} from "@/services/resource/public.ts";
import useBaseFontSize from "@/hooks/useBaseFontSize.ts";

interface FormProps {
    form?: FormInstance
    isEdit?: boolean
    formCol?: Pick<FormItemProps, 'labelCol' | 'wrapperCol'>
    style?: React.CSSProperties
}

const defaultFormCol = {
    labelCol: {span: 2},
    wrapperCol: {span: 22}
}

export const ImgForm: React.FC<FormProps> = props => {
    const {formCol = defaultFormCol, style} = props

    const baseFontSize = useBaseFontSize();

    return (
        <Row gutter={24} style={style}>
            <Col span={24}>
                <Form.Item
                    name="imgList"
                    label="上传图片"
                    valuePropName="fileList"
                    style={{marginBottom: 0}}
                    {...formCol}
                >
                    <UploadFile
                        service={upload}
                        listType="picture-card"
                        max={20}
                        maxSize={10}
                        acceptType={__ACCEPT_IMG_TYPE__}
                        style={{minHeight: baseFontSize * 120}}
                    />
                </Form.Item>
            </Col>
            <Col span={24} style={{paddingLeft: 'calc(8.33% + 8rem)'}}>
                图片支持.jpg .jpeg .png .svg .gif格式，图片大小10M以内
            </Col>
        </Row>
    )
}

export default ImgForm